import React, { Component } from 'react';

import { withRouter } from 'react-router-dom'

// @withRouter
class Tabbar extends Component {
    constructor(props){
        super(props);
        this.state = {
            tabs:[
                { name:'首页',to:'/index/home' },{ name:'分类',to:'/index/cate' },{ name:'购物车',to:'/index/gwc' },{ name:'我的',to:'/index/mine' },
            ]
        }
    }
    handleClick(item){
        
        console.log(this.props);

        // 编程式导航
        this.props.history.push(item.to);

        // this.props.history.go(-1); //类似goBack
        // this.props.history.go(1); //类似goForward
        // this.props.history.go(0);
        // this.props.history.goBack();
        // this.props.history.goForward();

        //当一个组件是通过路由匹配渲染的,则这个组件的props对象中会自动写入三个路由对象history,location,match
        //当一个组件不是通过路由匹配渲染的(手动渲染),则这个组件的props对象默认是{} , 解决办法是使用withRouter高阶组件处理.

        //this.props.history    负责跳路由
        //this.props.location   负责保存和当前路由有关的信息( 路由地址,路由参数 )
        //this.props.match      负责保存和当前路由有关的信息( 路由地址,路由参数 )
    }
    render() {
        return (
            <div className="tabbar">
                {
                    this.state.tabs.map((item,index)=>{
                        return (
                            <div onClick={()=>{ this.handleClick(item) }} key={index} className="tab">{item.name}</div>
                        )
                    })
                }
            </div>
        );
    }
}

export default withRouter(Tabbar);